<template>
  <div class="detail">
    <mt-header title="蓝鸥小区">
      <div slot="left">
        <mt-button icon="back" @click="back">返回</mt-button>
      </div>
      <div slot="right">
        <img src="../../assets/img/cellphone.png" @click="actionSheet">
      </div>
    </mt-header>
    <div class="info">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">订单状态</mt-tab-item>
        <mt-tab-item id="2">订单详情</mt-tab-item>
      </mt-navbar>
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <mt-cell title="订单已提交" label="请耐心等待回收员接单" value="3月4日 12:05" />
          <mt-cell title="接单成功" value="3月4日 12:05" />
          <mt-cell title="上门收货中" label="系统回收员正在上门收货" value="3月4日 12:05" />
          <mt-cell title="支付成功" value="3月4日 12:05" />
          <mt-cell title="订单完成" value="3月4日 12:05" />
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <mt-label class="hint">订单详情</mt-label>
          <table class="order" cellpadding="12">
            <tr>
              <th>蓝鸥小区</th>
            </tr>
            <tr>
              <td>A</td>
              <td>废报纸</td>
              <td>1(吨)</td>
              <td>￥2700</td>
            </tr>
            <tr>
              <td>B</td>
              <td>废旧打印机</td>
              <td>1(个)</td>
              <td>￥200</td>
            </tr>
            <tr>
              <td>C</td>
              <td>废旧电视机</td>
              <td>1(吨)</td>
              <td>￥300</td>
            </tr>
          </table>
          <mt-label class="hint">业主信息</mt-label>
          <mt-cell title="联系方式" value="濛子（女士）1819237328"></mt-cell>
          <mt-cell title="收货地址" value="北京市海淀区北下关街道蓝鸥小区"></mt-cell>
          <mt-cell title="收货服务" value="由平台提供上门收货服务"></mt-cell>
          <mt-label class="hint">订单信息</mt-label>
          <mt-cell title="订单号码" value="1829e763476993829"></mt-cell>
          <mt-cell title="订单时间" value="2018-03-04 12:05:23"></mt-cell>
        </mt-tab-container-item>
      </mt-tab-container>
      <mt-actionsheet
        :actions= "data"
        v-model="sheetVisible">
      </mt-actionsheet>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: '1',
        data: [{
          name: '客服电话：xxxxxxx'
        }],
        sheetVisible: false
      };
    },
    methods: {
      actionSheet: function(){
        this.sheetVisible = true;
      },
      back(){
        this.$router.go(-1)
      }
    }
  };
</script>
<style scoped>
  .detail {
    background-color: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .detail img {
    height: 20px;
    width: 20px;
  }
  .info {
    position: absolute;
    left: 3%;
    width: 94%;
    right: 3%;
    height: 100%;
  }
  .hint {
    color: #35495e;
    font-size: 14px;
  }
</style>
